//基本长度单位
@p1:1px;
@p2:2px;
@p5:5px;
@p10:10px;
@p12:12px;
@p14:14px;
@p20:20px;
@p24:24px;

@max-width:640px;
@min-width:320px;

@no:none;
@yahei:Microsoft YaHei;
@cen:center;
@l:left;
@r:right;
@c:center;

//颜色值
@cblack:#000;
@cred:#da5656;
@cwhite:#fff;
@cblue:#387be8;
@cyellow:#ffd200;
@cgraybg:#f4f4f4;
@ce:#eeeeee;
@cde:#dedede;

//颜色
@c-tit:#333333;
@c-des:#4c4c4c;
@c-grey:#929292;
@c-grey1:#5b5b5b;
@c-grey2:#999;
@c-bdb:#dcdcdc;
@c-black:#202025;
@bg-yellow:#ffd102;
@c-shadow:#d7a13a;
@c-redder:#ab2b2b;




//图片基本路径
@baseurl : "../../images/shop/";



//基础类清除默认样式
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, th, td, p, blockquote, pre, form, fieldset, legend, input, button, textarea, hr {margin:0;padding:0;}
body{
  font-size:@p14;
  //font-family:@yahei,Heiti SC;
  font-family: Arial, Helvetica, sans-serif;//手机上用
  //font-family: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;//电脑上用

}
li{list-style:@no;}
a{text-decoration:@no; color:@cblack;}
img,input{vertical-align: middle;}
table{border-collapse: collapse;}
fieldset, img {border:0;}
//address, caption, cite, code, dfn, em, i, th, var, b {font-style:normal;font-weight:normal;}
//避免触摸屏幕的时候默认样式
a,li,img,div{-webkit-tap-highlight-color: transparent;-webkit-touch-callout: none;-webkit-user-select: none;}
abbr, acronym {border:0;font-variant:normal;}


.ell{text-overflow:ellipsis;overflow:hidden; white-space:nowrap;}

.oh{overflow:hidden;}
.fix { *zoom:1; }
.fix:after {content:"\200B"; display:block; height:0; clear:both; }/*用于清除浮动，内容为\200B指零宽度空格，即可省略visible:hidden*/

.tl{text-align:left;}
.tr{text-align:right;}
.tc{text-align:center;}
.wrap{
  min-width: @min-width;
  max-width: @max-width;
  .w(100%);
  .ma;
  overflow:hidden;
}


.fb{font-weight:bold;}
.mt20{margin-top:@p20;}
.mt10{margin-top:@p10;}
.ml10{margin-left:@p10;}
.mr10{margin-right:@p10;}
.mt15{margin-top:15px;}
.mt5{margin-top:@p5;}
.ma{margin:0 auto;}
.p10{padding:@p10;}
.pb10{padding:@p10;}
.ml5{margin-left:@p5;}
.dn{display:@no;}
.db{display:block;}
.g6{color:#666;}
.g3{color:#333;}
.g9{color:#999;}
.gc{color:#ccc;}

.f14{ font-size:@p14;}


.pt10{padding-top:@p10;}
.pt20{padding-top:@p20;}
:root,body{height:100%;}
a,li{-webkit-tap-highlight-color: transparent;-webkit-touch-callout: @no;
  -webkit-user-select: @no;}

.fl{float:@l;}
.fr{float:@r;}
.pr{position:relative;}
.circle{border-radius:100%;-webkit-border-radius:100%;}
.cw{color:#fff;}


//公用函数类

//圆角
.border-radius(@radius:@p5){
  border-radius:@radius;
  -webkit-border-radius:@radius;
}
//超出几行显示...
.ell-line(@ln){
  text-overflow:ellipsis; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: @ln;  -webkit-box-orient: vertical;word-break:break-all;
}

.box-sizing(){
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.transition(@time:1s){
  transition: all @time;
  -webkit-transition: all @time;
}
.rotate(@deg:0){
  transform: rotate(@deg);
  -webkit-transform: rotate(@deg);
}
//全屏背影
.fullbg(@picname){
  background:url("@{baseurl}@{picname}") left top no-repeat;
  background-size:100% 100%;
}
//具体尺寸背影
.bg-size(@picname,@w:auto,@h:auto,@l:left,@t:top,@p:no-repeat){
  background:url("@{baseurl}@{picname}") @l @t @p;
  background-size:@w @h;
}
//普通背景
.bg(@picname,@l:left,@t:top,@p:no-repeat){
  background:url("@{baseurl}@{picname}") @l @t @p;
}
//居中背景
.bg-center(@picname,@p:no-repeat){
  background:url("@{baseurl}@{picname}") center center @p;
}
//背景色
.bg-color(@c){
  background-color:@c;
}
.mt(@px){
  margin-top:~`@{px} + 'px'`;
}
.mr(@px){
  margin-right:~`@{px} + 'px'`;
}
.ml(@px){
  margin-left:~`@{px} + 'px'`;
}
.mb(@p){
  margin-bottom:~`@{p} + 'px'`;
}
.pt(@px){
  padding-top:~`@{px} + 'px'`;
}
.pr(@px){
  padding-right:~`@{px} + 'px'`;
}
.pl(@px){
  padding-left:~`@{px} + 'px'`;
}
.plr(@px:10){
  padding-right:~`@{px} + 'px'`;
  padding-left:~`@{px} + 'px'`;
}
.ptb(@px:10){
  padding-top:~`@{px} + 'px'`;
  padding-bottom:~`@{px} + 'px'`;
}
.pb(@px){
  padding-bottom:~`@{px} + 'px'`;
}
.lh(@px){
  line-height:~`@{px} + 'px'`;
}
.fz(@px){
  font-size:~`@{px} + 'px'`;
}
//绝对定位
.pa(@left:0,@top:0,@zindex:1) {
  position:absolute;
  left:@left;
  top:@top;
  z-index:@zindex;
}
.pab(@left:0,@bottom:0,@zindex:1) {
  position:absolute;
  left:@left;
  bottom:@bottom;
  z-index:@zindex;
}
//绝对定位right
.par(@right:0,@top:0,@zindex:1) {
  position:absolute;
  right:@right;
  top:@top;
  z-index:@zindex;
}
//绝对定位居中
.ab-center(@w,@h,@zindex:1){
  position:absolute;
  left:50%;
  top:50%;
  width:~`@{w} + 'px'`;
  height:~`@{h} + 'px'`;
  margin:~`-@{h}/2 + 'px 0 0 -' + @{w}/2 + 'px'`;
  z-index:@zindex;
}
.pf(@left,@top,@z-index:1){
  position:fixed;
  left:@left;
  top:@top;
  z-index:@z-index;
}
.pfr(@right,@top,@z-index:1){
  position:fixed;
  right:@right;
  top:@top;
  z-index:@z-index;
}
//设置为块级元素，设置高宽
.dba(@w,@h) {
  display: block;
  width: ~`@{w} + 'px'`;
  height: ~`@{h} + 'px'`;
  line-height:~`@{h} + 'px'`;
}
.dib(@w,@h) {
  display: inline-block;
  width: ~`@{w} + 'px'`;
  height: ~`@{h} + 'px'`;
  line-height:~`@{h} + 'px'`;
}
.wh(@w,@h) {
  width:@w;
  height:@h;
}
.w(@w){
  width:@w;
}
.h(@h){
  height:@h;
}

.c(@color){
  color:@color;
}

//设置统一高度与行高
.dl(@h){
  height: ~`@{h} + 'px'`;
  line-height: ~`@{h} + 'px'`;
}
.bd(@c){
  border:1px solid @c;
}
.bdb(@c){
  border-bottom:1px solid @c;
}
.bdt(@c){
  border-top:1px solid @c;
}
.box-shadow(@v){
  box-shadow:@v;
}
.lh30{
  .lh(30);
}
.lh24{
  .lh(24);
}

.df{
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.df1{
  -webkit-box-flex: 1;
  flex:1;
  -webkit-flex:1;
  width:0%; //子元素的内容长短不同会导致无法“等分”
}




//hcl  补充

//padding
.pad-tb(@px:10){
  padding-top:~`@{px} + 'px'`;
  padding-bottom:~`@{px} + 'px'`;
}
.pad-t(@px:10){
  padding-top:~`@{px} + 'px'`;

}
.pad-b(@px:10){

  padding-bottom:~`@{px} + 'px'`;
}
.pad-lr(@px:10){
  padding-left:~`@{px} + 'px'`;
  padding-right:~`@{px} + 'px'`;
}
.pad-l(@px:10){
  padding-left:~`@{px} + 'px'`;

}
.pad-r(@px:10){

  padding-right:~`@{px} + 'px'`;
}
.pad(@px:10){
  padding-left:~`@{px} + 'px'`;
  padding-right:~`@{px} + 'px'`;
  padding-top:~`@{px} + 'px'`;
  padding-bottom:~`@{px} + 'px'`;
}



//font-style
.b{
  font-weight: bold;
}
.i{
  font-style:italic;
}



//position relative
.p-r{
  position: relative;
}
.p-a(@left:0,@top:0,@zindex:1) {
  position:absolute;
  left:@left;
  top:@top;
  z-index:@zindex;
}
.p-a-lb(@left:0,@bottom:0,@zindex:1) {
  position:absolute;
  left:@left;
  bottom:@bottom;
  z-index:@zindex;
}
//绝对定位right
.p-a-rt(@right:0,@top:0,@zindex:1) {
  position:absolute;
  right:@right;
  top:@top;
  z-index:@zindex;
}
//绝对定位居中
.ab-center(@w,@h,@zindex:1){
  position:absolute;
  left:50%;
  top:50%;
  width:~`@{w} + 'px'`;
  height:~`@{h} + 'px'`;
  margin:~`-@{h}/2 + 'px 0 0 -' + @{w}/2 + 'px'`;
  z-index:@zindex;
}
.p-f(@left,@top,@z-index:1){
  position:fixed;
  left:@left;
  top:@top;
  z-index:@z-index;
}
.p-f-rt(@right,@top,@z-index:1){
  position:fixed;
  right:@right;
  top:@top;
  z-index:@z-index;
}
.p-f-lb(@right,@top,@z-index:1){
  position:fixed;
  right:@right;
  bottom:@top;
  z-index:@z-index;
}
//背景图片
.bg-img(@picname){
  background:url("@{baseurl}@{picname}");
}
//背景图片位置
.bg-p(@p1:left,@p2:top){
  background-position: @p1 @p2;
}

.bg-p-s(@x:0,@y:0){//传入数字或百分比
  background-position: @x @y;
}
.bg-s(@w,@h:auto){
  -webkit-background-size:@w @h;
  background-size: @w @h;
}
.bg-r(@m){

}
//设置统一高度与行高
.h--l(@h){
  height: ~`@{h} + 'px'`;
  line-height: ~`@{h} + 'px'`;
}

.transition2(@time){
  transition: @time;
  -webkit-transition: @time;
}
.transform(@deg){
  transform: @deg;
  -webkit-transform: @deg;
}

/*两端对齐*/
//.t-a-j{
//  text-align:justify;
//  text-justify:inter-ideograph;
//  text-align-last:justify;
//  -webkit-text-align-last:justify;
//}
//全屏
.fullscreen{
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}